<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="main.js"></script>
  <style>
    .input {
    margin-top: 500px;
    display: block;
    background: red;
    /* 这里如果是 fixed，键盘弹出的时候就会被遮挡 (iOS) */
    /* position: fixed; */
    /* bottom: 0; */
  }
  </style>
</head>

<body>
  <form>
    <input id="input" class="input" type="" name="name" />
    <input id="input2" class="input" type="" name="name" />
    <input id="input3" class="input" type="" name="name" />
    <input id="input4" class="input" type="" name="name" />
    <input id="input5" class="input" type="" name="name" />
  </form>
  <script>
    (function () {
      // alert(window.innerHeight)
      // alert(window.outerHeight)

      // 这个可以作为键盘弹出的监听时间
      // window.document.addEventListener('focusin', () => {
      //   // alert('focusin')
      //   // alert(window.innerHeight)
      // })
      // window.document.addEventListener('focusout', () => {
      //   // alert('focusout')
      //   // alert(window.innerHeight)
      // })
      let d = document.getElementById('input')
      d.addEventListener('click', () => {
        setTimeout(() => {
          // d.scrollIntoView(true)
          // window.scrollTo(0, document.body.clientHeight)
        }, 1000)
      })
    })()
  </script>
</body>

</html>